<template>
  <div>
    <p>歌曲详情-{{$route.params.id}}</p>
    <p>当前展示{{id}}的信息...</p>
    <router-link to="/detail/apple">小苹果</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0
    }
  },
  created() {
    console.log('我正在获取'+this.$route.params.id+'的数据...');
    this.id = this.$route.params.id;
  },
  beforeRouteEnter (to, from, next) {
    // 组件内的守卫
    console.log(66);
    next()
  },
  // 路由更新时的守卫，搭配动态路由使用
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate');
    this.id = to.params.id;
    next()
  }
}
</script>

<style>

</style>